<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="4">
        <!-- <el-row justify="end">
          <el-button link type="success">采集仪器列表</el-button>
        </el-row> -->
        <el-row>
          <p class="pinformation">固定剂种类列表</p>
          <p class="totalStyle">共 {{ projectList.length }} 条数据</p>
        </el-row>
        <el-table ref="mainTableRef" :data="projectList" @row-click="rowClick" :row-class-name="tableRowClass">
          <el-table-column prop="fixerName" label="固定剂种类" align="center" />
        </el-table>
      </el-col>
      <el-col :span="20">
        <el-row>
          <p class="pinformation" style="margin-top: 9px">
            固定剂对应检测项目列表
          </p>
          <p class="totalStyle" style="margin-top: 6px">
            共 {{ total }} 条数据
          </p>
          <el-form-item label="点位数量：" style="margin-left: 10px">
            {{ countForm.pointCount || 0 }}
          </el-form-item>
          <el-form-item label="样品编号数：" style="margin-left: 10px">
            {{ countForm.sampleCount || 0 }}
          </el-form-item>
        </el-row>
        <el-table ref="subTableRef" :data="dyProjectList" style="margin-bottom: 10px">
          <el-table-column prop="jclbId" label="检测类别" align="center">
            <template #default="scope">
              {{
                proxy.getItemByArray(
                  jclbList,
                  "jclbId",
                  scope.row.jclbId,
                  "jclbName"
                )
              }}
            </template>
          </el-table-column>
          <el-table-column prop="pointName" label="点位名称" align="center" />
          <el-table-column prop="sampleCode" label="样品编号" align="center" width="140" show-overflow-tooltip />
          <el-table-column prop="jcxmNames" label="检测项目" align="center" show-overflow-tooltip>
            <template #default="scope">
              <span v-html="proxy.getSupAndSub(scope.row.jcxmNames)"></span>
            </template>
          </el-table-column>
          <el-table-column prop="sampleDay" label="第几天" align="center" width="70" />
          <el-table-column prop="sampleCount" label="频次" align="center" width="55" />
          <el-table-column label="是否分包" align="center" width="80">
            <template #default="scope">
              {{ scope.row.isPackage == 0 ? "否" : "是" }}
            </template>
          </el-table-column>
          <el-table-column prop="fixer" label="固定剂" align="center" width="300" show-overflow-tooltip>
            <template #default="scope">
              {{
                proxy.getItemByArray(
                  sys_fixer,
                  "value",
                  scope.row.fixer,
                  "label"
                )
              }}
            </template>
          </el-table-column>
          <el-table-column prop="fixerDesc" label="固定剂要求" align="center" width="300" show-overflow-tooltip>
            <template #default="scope">
              {{
                proxy.getItemByArray(
                  sys_fixer_desc,
                  "value",
                  scope.row.fixerDesc,
                  "label"
                )
              }}
            </template>
          </el-table-column>
          <el-table-column prop="methodCode" label="方法编号" align="center" width="150" />
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button link type="success" @click="imageView(scope.row)" v-if="scope.row.sampleFileId">查看截图</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="form.pageNum" v-model:limit="form.pageSize"
          @pagination="changePageNumList" />
      </el-col>
    </el-row>
    <el-image-viewer v-if="showViewer" :url-list="[url]" />
  </div>
</template>

<script setup>
import { fixerTypeList, getfixerList, getCount } from "@/api/cyCheck/cyReady";
import { allListJclb } from "@/api/store/jclb";
import { nextTick, ref } from "vue";
const { proxy } = getCurrentInstance();
const { sys_fixer, sys_fixer_desc } = proxy.useShareDict(
  "sys_fixer",
  "sys_fixer_desc"
);

const countForm = ref({})
const total = ref(0);
const projectList = ref([]);
const dyProjectList = ref([]);
const jclbList = ref([]);
const form = ref({
  pageNum: 1,
  pageSize: 10,
});

const props = defineProps({
  projectId: {
    type: String, //参数类型
  },
});

function getList() {
  fixerTypeList(props.projectId).then((res) => {
    projectList.value = res.data ? res.data : []
  });
}

function rowClick(row) {
  form.value.projectId = props.projectId;
  form.value.fixer = row.fixer;
  form.value.jclbId = row.jclbId;
  getfixerList(form.value).then((res) => {
    dyProjectList.value = res.rows;
    total.value = res.total;
    heightBright.value = row.fixer;
  });
  getCount({
    projectId: props.projectId,
    fixer: row.fixer,
  }).then((res) => {
    countForm.value = res.data;
  });
}

function changePageNumList() {
  getfixerList(form.value).then((res) => {
    dyProjectList.value = res.rows;
    total.value = res.total;
  });
}

allListJclb().then((res) => {
  jclbList.value = res.data;
});

getList();

watch(
  () => total.value,
  () => {
    if (total.value) {
      heightParams.value = [
        { tableName: "main", bottomHeight: 22 },
        { tableName: "sub", bottomHeight: 73 },
      ];
    } else {
      heightParams.value = [
        { tableName: "main", bottomHeight: 22 },
        { tableName: "sub", bottomHeight: 22 },
      ];
    }
    getTableHeight();
  }
);

const heightParams = ref([
  { tableName: "main", bottomHeight: 28 },
  { tableName: "sub", bottomHeight: 31 },
]);
function getTableHeight() {
  nextTick(function () {
    proxy.adaptiveHeight(proxy, heightParams.value);
  });
}

onMounted(() => {
  nextTick(function () {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  });
})

onUpdated(() => {
  nextTick(function () {
    getTableHeight();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});

const heightBright = ref();
function tableRowClass({ row }) {
  if (row) {
    if (row.fixer == heightBright.value) {
      return "current-row";
    }
    return "";
  }
}

// -----------------------图片预览----------------------
const showViewer = ref(false);
const url = ref("");

function imageView(row) {
  proxy.$download.previewPicById(row.sampleFileId).then((resp) => {
    url.value = resp;
    showViewer.value = true;
    nextTick(() => {
      $(".el-image-viewer__close").click(function () {
        showViewer.value = false;
      });
    });
  });
}
</script>

<style></style>
